<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <title>数智化赋能"微情境·微宣讲"红色实践活动</title>
  
  <!-- 引入Swiper CSS -->
  <link rel="stylesheet" href="../templates/h5/assets/swiper-bundle.min.css">

  <!-- 引入Tailwind CSS -->
  <script src="../templates/h5/assets/tailwindcss3.4.17.css"></script>

  <!-- 引入Font Awesome -->
  <link href="../templates/h5/assets/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet">

  <script>
    // 配置Tailwind自定义颜色（红色主题）
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#b71211', // 主红色
            secondary: '#FFD700', // 辅助金色
            red: {
              700: '#B91C1C',    // 稍浅红色
              800: '#991B1B',    // 深一点的红色
              900: '#7F1D1D',    // 最深红色
            }
          },
        },
      }
    }
  </script>

  <style type="text/tailwindcss">
    @layer utilities {
      /* 修复Swiper指示器样式 - 确保居中且状态稳定 */
      .swiper-pagination {
        @apply !absolute !z-50 !bottom-4 !left-1/2 !transform !-translate-x-1/2 !w-auto !flex !justify-center !items-center !gap-2;
      }
      .swiper-pagination-bullet {
        @apply !w-3 !h-3 !bg-white/50 !border !border-white/70 !transition-all !duration-300 !m-0 !rounded-full !opacity-100;
      }
      .swiper-pagination-bullet-active {
        @apply !bg-secondary !border-secondary !w-6 !rounded-full !opacity-100;
      }

      /* 导航栏样式 */
      .nav-item {
        @apply flex flex-col items-center justify-center text-gray-300 active:bg-red-800 h-full;
      }
      .nav-item.active {
        @apply text-white;
      }
      .nav-icon {
        @apply text-lg mb-1;
      }
      .nav-text {
        @apply text-xs;
      }

      /* 排序选项样式 */
      .sort-option {
        @apply py-3 text-center cursor-pointer transition-colors;
      }
      .sort-option.active {
        @apply text-secondary border-b-2 border-secondary font-medium;
      }

      /* 作品卡片样式 */
      .work-card {
        @apply bg-red-800 rounded-lg overflow-hidden border border-red-700;
      }

      /* 加载状态样式 */
      .loading-state {
        @apply text-center py-4 text-sm text-gray-300;
      }

      /* 图片占位符样式 */
      .img-placeholder {
        @apply bg-red-900 w-full h-full flex items-center justify-center;
      }
    }
  </style>

  <style>
    /* 固定轮播容器尺寸，防止动态变化导致分页器偏移 */
    #carouselContainer {
      width: 100% !important;
      height: 200px !important;
      position: relative !important;
      overflow: hidden !important;
    }

    /* 确保Swiper内部元素尺寸稳定 */
    #carouselSwiper,
    #carouselSwiper .swiper-wrapper,
    #carouselSwiper .swiper-slide {
      width: 100% !important;
      height: 100% !important;
    }

    /* 确保指示器始终可见且居中 */
    .swiper-pagination {
      display: flex !important;
      justify-content: center !important;
      align-items: center !important;
    }
  </style>
</head>
<body class="bg-primary text-white">
  <div class="max-w-md mx-auto min-h-screen flex flex-col">
    <!-- 页面内容区 -->
    <div class="flex-1 overflow-y-auto">
      <!-- 轮播图容器：固定尺寸确保分页器定位稳定 -->
      <div id="carouselContainer">
        <div class="swiper" id="carouselSwiper">
          <div class="swiper-wrapper">
            <div class="swiper-slide">
              <div class="img-placeholder">
                <img src="../templates/h5/assets/pictures/banner1.jpg" class="w-full h-full object-cover" loading="lazy">
              </div>
            </div>
            <div class="swiper-slide">
              <div class="img-placeholder">
                <img src="../templates/h5/assets/pictures/banner2.jpg" class="w-full h-full object-cover" loading="lazy">
              </div>
            </div>
          </div>
        </div>
        <!-- 渐变蒙版 -->
        <div class="absolute bottom-0 left-0 right-0 h-16 bg-gradient-to-t from-primary to-transparent pointer-events-none z-20"></div>
        <!-- 分页器 -->
        <div class="swiper-pagination"></div>
      </div>

      <!-- 页面其他内容 -->
      <div class="p-4">
        <!-- 第一部分：活动数据统计 -->
        <div class="bg-red-800 rounded-lg p-4 mb-4 border border-red-700">
          <h2 class="text-xl font-bold mb-4 text-white">活动数据</h2>

          <!-- 数据统计卡片 -->
          <div class="grid grid-cols-3 gap-2 mb-4">
            <div class="bg-red-900 rounded p-3 text-center">
              <div class="text-2xl font-bold text-secondary mb-1">128</div>
              <div class="text-xs text-gray-200">选手数量</div>
            </div>
            <div class="bg-red-900 rounded p-3 text-center">
              <div class="text-2xl font-bold text-secondary mb-1">32.5w</div>
              <div class="text-xs text-gray-200">总点赞数</div>
            </div>
            <div class="bg-red-900 rounded p-3 text-center">
              <div class="text-2xl font-bold text-secondary mb-1">156w</div>
              <div class="text-xs text-gray-200">总浏览量</div>
            </div>
          </div>

          <!-- 活动时间 -->
          <div class="flex justify-between items-center mb-3 text-sm">
            <span>活动开始时间：</span>
            <span class="text-secondary">2025-11-22 00:00:01</span>
          </div>
          <div class="flex justify-between items-center mb-4 text-sm">
            <span>活动结束时间：</span>
            <span class="text-secondary">2025-12-14 23:59:59</span>
          </div>

          <!-- 点赞规则 -->
          <div>
            <h3 class="font-medium mb-2 flex items-center">
              <i class="fa fa-info-circle mr-2 text-secondary"></i>点赞规则
            </h3>
            <ul class="text-xs text-gray-200 space-y-1 ml-6 list-disc">
              <li>每个微信账号每天可点赞5次</li>
              <li>每次点赞间隔需超过30秒</li>
              <li>禁止恶意刷赞，违者取消资格</li>
              <li>综合得分 = 教师评分40% + 学生评分30% + 社会影响力得分30%（点赞/浏览/转发）</li>
              <li>综合得分及对应排名每周更新一次</li>
            </ul>
          </div>
        </div>

        <!-- 第二部分：作品排序和列表 -->
        <div>
          <h2 class="text-xl font-bold mb-3 text-white">参赛作品</h2>

          <!-- 排序标题栏 -->
          <div class="flex border-b border-red-700 mb-3">
            <div class="sort-option active flex-1" data-sort="index">按序号</div>
            <div class="sort-option flex-1" data-sort="likes">按点赞量</div>
            <div class="sort-option flex-1" data-sort="score">按综合得分</div>
          </div>

          <!-- 作品列表容器 -->
          <div id="workList" class="grid grid-cols-2 gap-3 pb-20">
            <!-- 作品将通过JS动态加载 -->
          </div>

          <!-- 加载状态 -->
          <div id="loadingState" class="loading-state">
            <i class="fa fa-spinner fa-spin mr-2"></i>加载中...
          </div>

          <!-- 没有更多内容提示 -->
          <div id="noMore" class="loading-state hidden">
            已经到底啦
          </div>
        </div>
      </div>
    </div>

    <!-- 底部固定导航栏 -->
    <div class="fixed bottom-0 left-0 right-0 max-w-md mx-auto bg-red-900 border-t border-red-700 z-50 h-16 flex">
      <a href="/h5/index" class="nav-item active flex-1">
        <i class="nav-icon fa fa-home"></i>
        <span class="nav-text">首页</span>
      </a>
      <a href="/h5/index_huodong" class="nav-item flex-1">
        <i class="nav-icon fa fa-calendar"></i>
        <span class="nav-text">活动</span>
      </a>
      <a href="/h5/index_paihangbang" class="nav-item flex-1">
        <i class="nav-icon fa fa-bar-chart"></i>
        <span class="nav-text">排行榜</span>
      </a>
      <a href="/h5/index_yonghu" class="nav-item flex-1">
        <i class="nav-icon fa fa-user"></i>
        <span class="nav-text">我的</span>
      </a>
    </div>
  </div>

  <!-- 引入Swiper JS -->
  <script src="../templates/h5/assets/swiper-bundle.min.js"></script>
  
  <script>


    document.addEventListener('DOMContentLoaded', function() {
      // 等待轮播图图片加载完成后再初始化Swiper，避免尺寸计算错误
      const carouselImages = document.querySelectorAll('#carouselSwiper img');
      let loadedImages = 0;
      
      // 处理图片加载完成事件
      carouselImages.forEach(img => {
        // 检查图片是否已缓存
        if (img.complete) {
          loadedImages++;
          checkAllLoaded();
        } else {
          img.addEventListener('load', () => {
            loadedImages++;
            checkAllLoaded();
          });
          
          // 处理图片加载失败的情况
          img.addEventListener('error', () => {
            loadedImages++;
            checkAllLoaded();
          });
        }
      });
      
      // 所有图片加载完成后初始化Swiper
      function checkAllLoaded() {
        if (loadedImages === carouselImages.length) {
          initSwiper();
        }
      }
      
      // 初始化Swiper轮播
      function initSwiper() {
        const swiper = new Swiper('#carouselSwiper', {
          loop: true,
          autoplay: {
            delay: 3000,
            disableOnInteraction: false,
          },
          pagination: {
            el: '.swiper-pagination',
            clickable: true,
            dynamicBullets: false, // 禁用动态指示器，确保状态稳定
            renderBullet: function (index, className) {
              return '<span class="' + className + '"></span>';
            },
          },
          touchRatio: 1,
          simulateTouch: true,
          slidesPerView: 1,
          speed: 500,
          // 初始化时强制刷新布局
          on: {
            init: function() {
              this.update();
            }
          }
        });
      }
      
      // 导航栏切换效果
      const navItems = document.querySelectorAll('.nav-item');
      navItems.forEach(item => {
        item.addEventListener('click', function(e) {
          navItems.forEach(nav => nav.classList.remove('active'));
          this.classList.add('active');
        });
      });
      
      // 排序选项切换效果
      const sortOptions = document.querySelectorAll('.sort-option');
      sortOptions.forEach(option => {
        option.addEventListener('click', function() {
          sortOptions.forEach(opt => opt.classList.remove('active'));
          this.classList.add('active');
          
          // 排序时重置列表
          const sortType = this.dataset.sort;
          currentPage = 1;
          document.getElementById('workList').innerHTML = '';
          document.getElementById('noMore').classList.add('hidden');
          document.getElementById('loadingState').classList.remove('hidden');
          loadWorks(sortType);
        });
      });
      
      // 作品数据
      const workData = [
        {id: 1, title: "《红色记忆》", likes: 8542, views: 24631, score: 96.5, random: 10},
        {id: 2, title: "《时代新声》", likes: 7951, views: 21357, score: 92.3, random: 11},
        {id: 3, title: "《青春力量》", likes: 6824, views: 18426, score: 88.7, random: 12},
        {id: 4, title: "《传承之光》", likes: 5973, views: 15824, score: 85.2, random: 13},
        {id: 5, title: "《希望的方向》", likes: 4852, views: 12635, score: 81.6, random: 14},
        {id: 6, title: "《奋斗者说》", likes: 3759, views: 10257, score: 78.3, random: 15},
        {id: 7, title: "《红色足迹》", likes: 3625, views: 9842, score: 77.8, random: 16},
        {id: 8, title: "《理想之光》", likes: 3254, views: 8753, score: 76.5, random: 17},
        {id: 9, title: "《初心不改》", likes: 2987, views: 7654, score: 75.2, random: 18},
        {id: 10, title: "《使命在肩》", likes: 2753, views: 6542, score: 74.1, random: 19},
        {id: 11, title: "《信仰的力量》", likes: 2541, views: 5876, score: 73.6, random: 20},
        {id: 12, title: "《继往开来》", likes: 2357, views: 5241, score: 72.9, random: 21},
        {id: 13, title: "《时代召唤》", likes: 2156, views: 4875, score: 71.8, random: 22},
        {id: 14, title: "《砥砺前行》", likes: 1987, views: 4325, score: 70.5, random: 23},
        {id: 15, title: "《追梦路上》", likes: 1854, views: 3987, score: 69.7, random: 24},
        {id: 16, title: "《红色基因》", likes: 1753, views: 3654, score: 68.9, random: 25}
      ];
      
      // 分页参数
      let currentPage = 1;
      const pageSize = 6;
      const totalPages = Math.ceil(workData.length / pageSize);
      
      // 加载作品列表
      function loadWorks(sortType = 'index') {
        // 根据排序类型对数据进行排序
        let sortedData = [...workData];
        switch(sortType) {
          case 'likes':
            sortedData.sort((a, b) => b.likes - a.likes);
            break;
          case 'score':
            sortedData.sort((a, b) => b.score - a.score);
            break;
          default: // index
            sortedData.sort((a, b) => a.id - b.id);
        }
        
        // 计算当前页的数据范围
        const startIndex = (currentPage - 1) * pageSize;
        const endIndex = Math.min(startIndex + pageSize, sortedData.length);
        const currentPageData = sortedData.slice(startIndex, endIndex);
        
        // 获取作品列表容器
        const workList = document.getElementById('workList');
        
        // 创建作品卡片并添加到列表
        currentPageData.forEach(work => {
          const workCard = document.createElement('div');
          workCard.className = 'work-card';
          
          // 格式化数字显示
          const formatNumber = (num) => {
            return num >= 1000 ? (num / 1000).toFixed(1) + 'k' : num.toString();
          };
          
          workCard.innerHTML = `
            <div class="relative">
              <a href="index_zuopin.html">
                <div class="img-placeholder">
                  <img src="https://picsum.photos/300/200?random=${work.random}" 
                       alt="${work.title}封面" 
                       class="w-full h-32 object-cover" 
                       loading="lazy">
                </div>
              </a>
              <div class="absolute top-1 left-1 bg-primary text-white text-xs w-5 h-5 flex items-center justify-center rounded-full">${work.id}</div>
            </div>
            <div class="p-2">
              <h3 class="text-sm font-medium truncate mb-1">${work.title}</h3>
              <div class="text-xs text-gray-200 space-y-1">
                <div class="flex justify-between">
                  <span><i class="fa fa-thumbs-up mr-1 text-secondary"></i>点赞</span>
                  <span>${formatNumber(work.likes)}</span>
                </div>
                <div class="flex justify-between">
                  <span><i class="fa fa-eye mr-1 text-secondary"></i>浏览</span>
                  <span>${formatNumber(work.views)}</span>
                </div>
                <div class="flex justify-between">
                  <span><i class="fa fa-star mr-1 text-secondary"></i>得分</span>
                  <span>${work.score}</span>
                </div>
              </div>
            </div>
          `;
          
          workList.appendChild(workCard);
        });
        
        // 更新加载状态
        currentPage++;
        if (currentPage > totalPages) {
          document.getElementById('loadingState').classList.add('hidden');
          document.getElementById('noMore').classList.remove('hidden');
        } else {
          document.getElementById('loadingState').classList.remove('hidden');
          document.getElementById('noMore').classList.add('hidden');
        }
      }
      
      // 滚动加载更多
      function handleScroll() {
        const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        const scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
        const clientHeight = document.documentElement.clientHeight || window.innerHeight;
        
        // 当滚动到距离底部200px以内，并且不在加载中，且还有更多数据时
        if (scrollTop + clientHeight >= scrollHeight - 200 && 
            currentPage <= totalPages && 
            !document.getElementById('loadingState').classList.contains('hidden')) {
          const activeSort = document.querySelector('.sort-option.active').dataset.sort;
          loadWorks(activeSort);
        }
      }
      
      // 初始加载第一页作品
      loadWorks();
      
      // 添加滚动事件监听
      window.addEventListener('scroll', handleScroll);
    });
  </script>
</body>
</html>